<template>
  <div :class="className">
     <span class="item-label">{{ label }}</span>
     <span class="item-value">
         <span class="item-value-span">{{ value }}</span>
         <slot name="default"></slot>
     </span>
  </div>
</template>
<script setup lang="ts">
import { ref , reactive, computed } from 'vue'
let props = defineProps({
    bgName:{
      type: String,
      default: ()=> 'bg-01'
    },
    label: {
      type: [String, Number],
      default: ()=> ''
    },
    value: {
      type: [String, Number],
      default: ()=> ''
    }
})

const className = computed(()=>{
   return {
     'base-info-card': true,
     'bg-01': props?.bgName == 'bg-01',
     'bg-02': props?.bgName == 'bg-02'
   }
})

</script>
<style scoped lang='less'>
.base-info-card{
  height: 110px;
  padding-left: 52px;
  display: flex;
  align-items: center;
}
.item-label{
  margin-right: 31px;
  display: flex;
  font-weight: 400;
  font-size: 16px;
  color: #333333;
}

.item-value{
  align-items: center;
  display: flex;
  font-weight: bold;
  font-size: 30px;
  color: #333333;
}

.item-value-span{
  margin-right: 10px;
}

.bg-01{
  background: url('@/assets/images/user-base-card-left-bg.png') top left no-repeat, 
  url('@/assets/images/user-base-card-02bg.png') top right no-repeat,
  linear-gradient(to right, #E6EDFC 0%, #F3F8FE 100%);
  background-size: contain;
  background-repeat: no-repeat;
}

.bg-02{
  background: url('@/assets/images/user-base-card-left-bg.png') top left  no-repeat,
  url('@/assets/images/user-base-card-01bg.png') top right no-repeat,
  linear-gradient( to right, #E6EDFC 0%, #F3F8FE 100%);
  background-size: contain;
  background-repeat: no-repeat;
}

</style>